<template>
  <div class="bottomCard-root">
    <lark-card border :radius="false" :show-title="false" body-width="75vw" body-height="30vh">
      <div class="bottomCard-body">
        <div class="bottomCard-body-header">
          <div class="bottomCard-body-header-tabs">
            <btn-tabs @change="tabsChange" :items="tabsItems"></btn-tabs>
          </div>
          <div class="bottomCard-body-header-operation">
            <el-button size="mini" type="success" @click="()=>{}">新增</el-button>
            <div class="bottomCard-body-header-close" @click="closeAction">
              <i class="el-icon-error"></i>
            </div>
          </div>
        </div>
      </div>
    </lark-card>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
  import btnTabs from '@/components/ServiceComponents/btnTabs'

  export default {
    name: 'bottomCard',
    components: {
      btnTabs
    },
    setup(props, content) {
      let data = reactive({
        tabsItems: [{ name: '基本信息', value: 1 }, { name: '生长状况', value: 2 }, { name: '物后期', value: 3 }],
        pageInfo: {
          total: 0,
          pageNum: 1,
          pageSize: 5
        },
        tabs: 1
      })
      const closeAction = () => {
        content.emit('closeSelfAction')
      }
      const tabsChange = async(item) => {
        data.tabs = item.value
        data.pageInfo.pageNum = 1
        await loadListData()
      }
      const loadListData = () => {
      }
      return { ...toRefs(data), closeAction, tabsChange }
    }
  }
</script>

<style scoped lang="scss">
  $header-height: 20px;
  .bottomCard-root {
    .bottomCard-body {
      .bottomCard-body-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: $header-height;
        box-sizing: border-box;

        .bottomCard-body-header-tabs {

        }

        .bottomCard-body-header-operation {
          display: flex;
        }

        .bottomCard-body-header-close {
          margin-left: 20px;
          font-size: 20px;
          color: red;

          &:hover {
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
<style lang="scss">
  .bottomCard-root {
    .bottomCard-body {
      .bottomCard-body-header {
        .bottomCard-body-header-operation {
          .el-button.el-button--success.el-button--mini {
            padding-top: 5px;
            padding-bottom: 5px;
          }
        }
      }
    }
  }
</style>
